<template>
    <div class="todo-container">
        <div class="todo-wrap">
            <TodoHeader :addTodo="addTodo" />
            <TodoList :todoLists="todoLists" :deletTodo="deletTodo"/>
            <TodoFooter :selectAll="selectAll" :todoLists="todoLists" :deletAllComplete="deletAllComplete"/>
        </div>
    </div>
</template>

<script>
    import TodoHeader from './components/TodoHeader'
    import TodoList from './components/TodoList'
    import TodoFooter from './components/TodoFooter'

    export default {
        name: "App",
        // components:['TodoHeader','TodoList','TodoFooter']
        components:{
            TodoHeader,
            TodoList,
            TodoFooter
        },
        data () {
            return {
                // 从localstorage读取
                // todoLists 改变的时候 就存 要用到 深度监视，一般监视只能监视todoList
                /*todoLists:[
                    {todocont:'one',complete:false},
                    {todocont:'two',complete:false},
                    {todocont:'three',complete:false}
                ]*/
                todoLists:JSON.parse(window.localStorage.getItem('todos_key')||'[]')
            }
        },
        watch:{
            // 深度监视
            todoLists:{
              deep:true,
              handler: function (val) {
                  console.log(val)
                  window.localStorage.setItem('todos_key',JSON.stringify(val));
              },
          }
        },
        methods:{
            // 1、增
            addTodo (data) {
                this.todoLists.unshift(data);
            },
            // 删
            deletTodo (index) {
                this.todoLists.splice(index,1);
            },
            // 全选
            selectAll (isSelect) {
                this.todoLists.forEach( item => {
                    item.complete = isSelect
                })
            },
            // 全删已完成的
            deletAllComplete () {
                this.todoLists=this.todoLists.filter(item => !item.complete);
            }
        }
    }
</script>

<style lang="stylus" scoped>
    /*app*/
    .todo-container {
        width: 600px;
        margin: 0 auto;
    }
    .todo-container .todo-wrap {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
</style>